<!DOCTYPE html>
<html>
    <head>
        <title>{$title}</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="keywords" content="{$keywords}">
        <meta name="description" content="{$description}">
        <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
        <link rel="stylesheet" href="__PUBLIC__/App/overwatch/css/style_end.css?v=1.0.7">
        <!-- 引入 jQuery 库 -->
        <script type="text/javascript" src="__PUBLIC__/App/overwatch/js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/App/overwatch/js/knockout-2.3.0.js"></script>
        <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/jwplayer/jwplayer.js"></script>
        <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/web/paging.js"></script>
        <script type="text/javascript" src="__PUBLIC__/App/overwatch/js/index_end.js?v=1.0"></script>
        <script type="text/javascript">
            {:C('GLOBAL_BDHM')}
        </script>
    </head>
    <body>
        <!--part1-->
        <if condition="$type eq 1">
            <div class="part-one" style="background: url('__PUBLIC__/App/overwatch/images/topbg.jpg') top center no-repeat">
        <elseif condition="$type eq 2"/>
            <div class="part-one" style="background: url('__PUBLIC__/App/overwatch/images/topbg_defence.jpg') top center no-repeat">
        <elseif condition="$type eq 3"/>
            <div class="part-one" style="background: url('__PUBLIC__/App/overwatch/images/topbg_tank.jpg') top center no-repeat">
        <elseif condition="$type eq 4"/>
            <div class="part-one" style="background: url('__PUBLIC__/App/overwatch/images/topbg_support.jpg') top center no-repeat">
        </if>
            <div class="header">
                <div class="width13">
                    <p class="toplogo"><img src="__PUBLIC__/App/overwatch/images/logo.png"/></p>
                    <a href="{:U('/')}#overwatch" class="intowebsite">进入官网</a>
                </div>
            </div>
            <!--武器类型-->
            <div class="width13 video-frame">
                <ul class="relative">
                    <if condition="$type eq 1">
                        <li class="active">
                            <a href="javascript:;" class="relative"></a>
                        </li>
                        <li class="second">
                            <a href="{:U('overwatch/index', ['type' => 2])}" class="relative"></a>
                        </li>
                        <li class="three">
                            <a href="{:U('overwatch/index', ['type' => 3])}" class="relative"></a>
                        </li>
                        <li class="absolute four">
                            <a href="{:U('overwatch/index')}" class="relative">
                                <if condition="$config[4]['status'] eq 1">
                                    <span class="ongoing"></span>
                                </if>
                            </a>
                        </li>
                    <elseif condition="$type eq 2" />
                        <li>
                            <a href="{:U('overwatch/index', ['type' => 1])}" class="relative"></a>
                        </li>
                        <li class="second active">
                            <a href="javascript:;" class="relative"></a>
                        </li>
                        <li class="three">
                            <a href="{:U('overwatch/index', ['type' => 3])}" class="relative"></a>
                        </li>
                        <li class="absolute four">
                            <a href="{:U('overwatch/index')}" class="relative">
                                <if condition="$config[4]['status'] eq 1">
                                    <span class="ongoing"></span>
                                </if>
                            </a>
                        </li>
                    <elseif condition="$type eq 3" />
                        <li>
                            <a href="{:U('overwatch/index', ['type' => 1])}" class="relative"></a>
                        </li>
                        <li class="second">
                            <a href="{:U('overwatch/index', ['type' => 2])}" class="relative"></a>
                        </li>
                        <li class="three active">
                            <a href="javascript:;" class="relative"></a>
                        </li>
                        <li class="absolute four">
                            <a href="{:U('overwatch/index')}" class="relative">
                                <if condition="$config[4]['status'] eq 1">
                                    <span class="ongoing"></span>
                                </if>
                            </a>
                        </li>
                    <elseif condition="$type eq 4" />
                        <li>
                            <a href="{:U('overwatch/index', ['type' => 1])}" class="relative"></a>
                        </li>
                        <li class="second">
                            <a href="{:U('overwatch/index', ['type' => 2])}" class="relative"></a>
                        </li>
                        <li class="three">
                            <a href="{:U('overwatch/index', ['type' => 3])}" class="relative"></a>
                        </li>
                        <li class="absolute four active">
                            <a href="javascript:;" class="relative">
                                <if condition="$config[4]['status'] eq 1">
                                    <span class="ongoing"></span>
                                </if>
                            </a>
                        </li>
                    </if>
                </ul>
            </div>
        </div>
        <!--part2-->
        <div class="part-two width13 hightlight JS-highlights" style="display: none;">
            <h1><img src="__PUBLIC__/App/overwatch/images/highlights.png?v=1.0"/></h1>
            <h2>精彩锦集</h2>
            <p class="font16">有亮点的玩家视频会被制作成精彩集锦哦</p>
            <div class="hightlvideo">
                <div id="highlights">Loading the player...</div>
            </div>
        </div>
        <!--part3-->
        <div class="part-two width13 part-show">
            <h1><img src="__PUBLIC__/App/overwatch/images/part02title.png?v=1.0"/></h1>
            <h2>获奖视频</h2>
            <ul class="preview-ul">
                <!-- ko foreach:winnerVideos -->
                <li>
                    <a href="" target="_blank" data-bind="attr:{'href':videoLink},event:{mouseover:play, mouseout:pause}">
                        <div class="preview-img relative">
                            <video style="display: block;" src="" poster="" data-bind="attr:{'poster':thumb, 'src':src}" loop="loop"></video>
                            <!-- ko if:$index() == 0 -->
                            <em class="back_orange absolute">1st</em>
                            <!-- /ko -->
                            <!-- ko if:$index() == 1 -->
                            <em class="back_orange absolute">2nd</em>
                            <!-- /ko -->
                            <!-- ko if:$index() == 2 -->
                            <em class="back_orange absolute">3rd</em>
                            <!-- /ko -->
                        </div>
                        <span class="preview-title font14" data-bind="text:title"></span>
                        <p class="display-box preview-footer font14">
                            <span class="box-flexo">
                                <i><img src="" data-bind="attr:{'src':avatar}"/></i>
                                <em data-bind="text:nickname"></em>
                            </span>
                        </p>
                    </a>
                </li>
                <!-- /ko -->
            </ul>
        </div>

        <!--part4-->
        <div class="part-two width13 wonderful">
            <h1>
                <span class="jcvideo font16">精彩视频</span>
            </h1>
            <ul class="preview-ul">
                <!-- ko foreach:videos -->
                <li>
                    <a href="" target="_blank" data-bind="attr:{'href':videoLink},event:{mouseover:play, mouseout:pause}">
                        <div class="preview-img relative">
                            <video style="display: block;" src="" poster="" data-bind="attr:{'poster':thumb, 'src':src}" loop="loop"></video>
                        </div>
                        <span class="preview-title font14" data-bind="text:title"></span>
                        <p class="display-box preview-footer font14">
                            <span class="box-flexo">
                                <i><img src="" data-bind="attr:{'src':avatar}"/></i>
                                <em data-bind="text:nickname"></em>
                            </span>
                        </p>
                    </a>
                </li>
                <!-- /ko -->
                <p class="flip" data-bind="visible:paging().length > 1, foreach:paging">
                    <!-- ko if:!is_next -->
                    <a data-bind="css:{'active': is_current,'back_orange':is_current}, click:click, text:text" class="" href="javascript:;"></a>
                    <!-- /ko -->
                </p>
            </ul>
        </div>

        <!--part5-->
        <div class="part-three">
            <div class="width13">
                <div class="play-mes left">
                <p class="logo-btn">
                    <span class="play-logo left"></span>
                    <a href="{:U('home/download/index')}#overwatch" target="_blank" class="downloadbtn right font12">下载工具</a>
                </p>
                <p class="play-desc font13">
                    <span>最轻量级录制工具，独创“时光机”录制模式<br>
                        <em class="orange">[开启录制模式后，只需点击热键即可即时记录上一分钟的炫酷操作]</em>
                        <br>
                        轻松记录亮眼时刻，随时保存游戏足迹，打造专属于你的游戏回忆录！
                    </span>
                    <br><br><br>
                    <span>官方微博账号：<a href="http://weibo.com/p/1006065640304166/home?from=page_100606&mod=TAB&is_all=1#1464945059024" target="_blank" class="orange link">66play电子竞技</a></span>
                    <span>微信公众号：66Play</span>
                    <span>官方网站：<a href="{:U('/')}#overwatch" target="_blank" class="orange link">www.66Play.com</a></span>
                </p>
                </div>
                <p><img src="__PUBLIC__/App/overwatch/images/footerpic.png" class="right"/></p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window._THIS = {
            defaultAvatar : "__PUBLIC__/Home/ui3/images/avatar-mr.png",
            videoLink : "{:U('home/share/video')}",
            url : "{:U('overwatch/index', ['type' => $type])}",
            total : {$total},
            pager : {$pager},
        };
        window._COMMON = {
            PUBLIC : "__PUBLIC__",
        };
        function dataInit() {
            var highlights = {$highlights|json_encode};
            if (highlights) {
                showHighlights(highlights);
            }

            var winnerVideos = {$winnerVideos|json_encode};
            viewModel.winnerVideos(getVideos(winnerVideos));

            var videos = {$videos|json_encode};
            viewModel.videos(getVideos(videos));
            viewModel.paging(getPaging(_THIS.total, _THIS.pager, 1, changePage));
        }
    </script>
</html>